<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>地图</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
      }
      .amap-logo,
      .amap-copyright {
        display: none !important;
        visibility: hidden !important;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <!--    <script src="https://webapi.amap.com/maps?v=1.4.15&key=d99cf0fc41f79425572e5b1298c0f21c"></script>-->
    <script>
      let funcName = '_func_' + (Number(String(Math.random()).slice(2)) + Date.now()).toString(36);
      let query = window.location.href.split('?').pop();
      query = query.split('&').reduce(function (res, item) {
        const [key, val] = item.split('=');
        res[key] = val;
        return res;
      }, {});
      window.addEventListener('unload', function () {
        if (window.map) {
          window.map.destroy();
          console.log('iframe map destroyed');
        }
      });
      window[funcName] = function () {
        window.mapUtils = {
          getAMap: function () {
            return AMap;
          },
          getMap: function (options) {
            const opt = {
              viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
              zoom: 11, // 初始化地图层级
              center: [104.07, 30.66], // 初始化地图中心点
              zooms: [3, 24], //传入的zooms不生效
              expandZoomRange: true,
            };
            if (typeof options === 'function') {
              options = options({ AMap: AMap, options: opt });
            }
            options = Object.assign({}, opt, options);
            window.map = new AMap.Map('container', options);
            return window.map;
          },
        };
        if (typeof window.onAMapApiLoaded === 'function') {
          window.onAMapApiLoaded();
        }
      };
      const v = query.version || '1.4.15';
      const key = query.key || 'd99cf0fc41f79425572e5b1298c0f21c';
      const url = 'https://webapi.amap.com/maps?v=' + v + '&key=' + key + '&callback=' + funcName;
      const jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi);
    </script>
  </body>
</html>
